import { PageContainer } from '@ant-design/pro-components';
import React, {useEffect, useState} from 'react';
import {useParams} from "@@/exports";
import {
  getInterfaceInfoByIdUsingGet,
  invokeInterfaceInfoUsingPost
} from "@/services/myapi-backend/interfaceInfoController";
import {Button, Card, Descriptions, Divider, Form, message} from "antd";
import TextArea from "antd/es/input/TextArea";

/**
 * 主页
 * @constructor
 */
const Index: React.FC = () => {
  const [data, setData] = useState<API.InterfaceInfo[]>([]);
  const params = useParams();
  const [invokeRes, setInvokeRes] = useState<any>();
  const [invokeLoading, setInvokeLoading] = useState(false);

  const loadData = async () => {
    if (!params.id) {
      message.error("参数不存在");
    }
    try {
      const res = await getInterfaceInfoByIdUsingGet({
        id: Number(params.id)
      });
      console.log(res.data)
      setData(res.data)
    } catch (error) {
      message.error('请求失败，' + error.message);
    }
  }

  // 首次加载组件的时候可以用useEffect向后端发送请求
  useEffect(() => {
    loadData();
  }, []);

  const onFinish = async (values: any) => {
    if (!params.id) {
      message.error("接口不存在");
    }
    setInvokeLoading(true);
    try {
      const res = await invokeInterfaceInfoUsingPost({
        id: Number(params.id),
        ...values
      });
      setInvokeRes(res.data);
      message.success("请求成功")
    } catch (error) {
      message.error('操作失败，' + error.message);
    }
    setInvokeLoading(false);
  };

  return (
    <PageContainer title="查看接口文档">
      <Card>
        {data ? (
            <Descriptions title={data.name} >
              <Descriptions.Item label="请求地址">{data.url}</Descriptions.Item>
              <Descriptions.Item label="请求方法">{data.method}</Descriptions.Item>
              {/* eslint-disable-next-line react/jsx-no-undef */}
              <Descriptions.Item label="状态">{data.status ? (
                <Button color="primary" variant="outlined">
                  可用
                </Button>
                ) : (
                <Button color="danger" variant="outlined">
                  不可用
                </Button>
              )}
              </Descriptions.Item>
              <Descriptions.Item label="描述">{data.description}</Descriptions.Item>
              <Descriptions.Item label="请求参数">{data.requestParams}</Descriptions.Item>
              <Descriptions.Item label="请求头">{data.requestHeader}</Descriptions.Item>
              <Descriptions.Item label="响应头">{data.responseHeader}</Descriptions.Item>
              <Descriptions.Item label="创建时间">{data.createTime}</Descriptions.Item>
              <Descriptions.Item label="更新时间">{data.updateTime}</Descriptions.Item>
            </Descriptions>
          ) : (
            <>接口不存在</>
        )}
      </Card>
      <Divider/>
      <Card title={"在线测试"}>
        <Form
          name="invoke"
          layout="vertical"
          onFinish={onFinish}
        >
          <Form.Item
            label="请求参数"
            name="userRequestParams"
          >
            <TextArea />
          </Form.Item>

          <Form.Item wrapperCol={{span: 16 }}>
            <Button type="primary" htmlType="submit">
              调用
            </Button>
          </Form.Item>
        </Form>
      </Card>
      <Divider/>
      <Card title={"测试结果"} loading={invokeLoading}>
        {invokeRes}
      </Card>
    </PageContainer>
  );
};

export default Index;
